const blk_pitn = {
    //各小方块相对【自身中心】的位置 -- 【自身中心】确定为#div22的方块
    block1: [
      [0, 1],
      [0, 0],
      [-1, 0],
      [-1, -1],
    ],
    block2: [
      [0, 1],
      [0, 0],
      [-1, 0],
      [0, -1],
    ],
    block3: [
      [-1, 1],
      [0, 0],
      [-1, 0],
      [-1, -1],
    ],
    block4: [
      [0, 1],
      [0, 0],
      [-1, 0],
      [-1, -1],
    ] /* 1 */,
    block5: [
      [-1, 1],
      [0, 0],
      [-1, 0],
      [0, -1],
    ],
    block6: [
      [0, -1],
      [0, 0],
      [-1, 0],
      [1, -1],
    ],
    block7: [
      [-1, -1],
      [0, 0],
      [-1, 0],
      [1, 0],
    ],
    block8: [
      [-1, 1],
      [0, 0],
      [-1, 0],
      [-1, -1],
    ] /* 3 */,
    block9: [
      [0, -1],
      [0, 0],
      [-1, 0],
      [1, 0],
    ],
    block10: [
      [-1, 1],
      [0, 0],
      [-1, 0],
      [1, 0],
    ],
    block11: [
      [2, 0],
      [0, 0],
      [-1, 0],
      [1, 0],
    ] /* — */,
    block12: [
      [0, 1],
      [0, 0],
      [-1, 0],
      [0, -1],
    ] /* 2 */,
    block13: [
      [0, 1],
      [0, 0],
      [-1, 0],
      [-1, -1],
    ] /* 1 */,
    block14: [
      [1, 1],
      [0, 0],
      [-1, 0],
      [1, 0],
    ],
    block15: [
      [1, -1],
      [0, 0],
      [-1, 0],
      [1, 0],
    ],
    block16: [
      [-1, -1],
      [0, 0],
      [-1, 0],
      [1, 0],
    ] /* 7 */,
    block17: [
      [0, 1],
      [0, 0],
      [-1, 0],
      [0, -1],
    ] /* 2 */,
    block18: [
      [0, 1],
      [0, 0],
      [-1, 0],
      [-1, -1],
    ] /* 1 */,
    block19: [
      [0, -1],
      [0, 0],
      [-1, 0],
      [1, 0],
    ] /* 9 */,
    block20: [
      [1, -1],
      [0, 0],
      [-1, 0],
      [1, 0],
    ],
    block21: [
      [0, 1],
      [0, 0],
      [-1, 0],
      [-1, -1],
    ] /* 1 */,
    block22: [
      [1, 1],
      [0, 0],
      [-1, 0],
      [1, 0],
    ] /* 14 */,
    block23: [
      [0, 2],
      [0, 0],
      [0, -1],
      [0, 1],
    ] /* | */,
  },
  offset_pitn = {
    //各方块block相对【爱心中心】的位置
    block1: [5, 3],
    block2: [5, 1],
    block3: [3, 4],
    block4: [3, 2],
    block5: [3, -1],
    block6: [2, 5],
    block7: [2, 1],
    block8: [1, -1],
    block9: [1, -3],
    block10: [1, 2],
    block11: [0, 3],
    block12: [0, 0] /* 【爱心中心】*/,
    block13: [-1, -4],
    block14: [0, -2],
    block15: [-2, 4],
    block16: [-2, 2],
    block17: [-2, 0],
    block18: [-3, -2],
    block19: [-4, 0],
    block20: [-3, 5],
    block21: [-5, 3],
    block22: [-4, 1],
    block23: [-6, 1] /* 因动画需要移动一个方块，故y轴坐标-1*/,
  };

let blocks = document.getElementsByClassName("block"),
  block = blocks[0],
  love = document.getElementsByClassName("love")[0],
  timer = null,
  index = 0, //记录拼接爱心的动画步骤
  clone_block; //用于克隆方块
//1.移动方块的【自身中心】到【爱心中心】
block.style.top = "50%";
block.style.left = "50%";
block.style.margin = "-20px 0 0 -20px";

const block_left = parseFloat(
    window.getComputedStyle(block, null).left.slice(0, -2)
  ), //【爱心中心】 左边距离父元素的距离
  block_top = parseFloat(window.getComputedStyle(block, null).top.slice(0, -2)); //【爱心中心】 顶部距离父元素的距离

function Next() {
  if (++index >= 24) {
    clearInterval(timer);

    Rise();
    // alert("已经是最后一个了！");
    return;
  }

  block.style.visibility = "visible"; //升空动画前允许可见

  //2.移动方块到指定的位置-即是移动【自身中心】到目标位置
  block.style.left = block_left + 40 * offset_pitn["block" + index][0] + "px";
  block.style.top = block_top - 40 * offset_pitn["block" + index][1] + "px";
  for (let i = 0; i < block.children.length; i++) {
    // block.children[1].innerText = index;    //编号便于调试
    block.children[i].style.left = blk_pitn["block" + index][i][0] * -40 + "px";
    /* -40 是因为逻辑坐标和浏览器的x，y轴方向不一样*/
    block.children[i].style.top = blk_pitn["block" + index][i][1] * -40 + "px";
  }

  //3.克隆方块—保存现在的位置
  /* 一共会克隆23个方块，加上原先的一个方块block，共24个方块，即多出原先的block方块*/
  clone_block = block.cloneNode(true);
  love.appendChild(clone_block);

  if (love.children.length >= 24) {
    blocks[blocks.length - 1].children[2].style.display = "none"; //去掉多余的小方块
    block.style.display = "none"; //隐藏多出的block方块
  }
}

function Rise() {
  //4.爱心升高，多出的那个小方块开始掉落
  console.log("开始升空");
  let timer2 = null,
    distance = 0;
  /* 升高时，移动的距离*/
  const target = 120 /* 目标距离*/,
    speed = 1;
  /*移动速度*/

  let love_top = parseFloat(
    window.getComputedStyle(love, null).top.slice(0, -2)
  ); //爱心盒子距离屏幕顶部的距离

  timer2 = setInterval(() => {
    distance += speed;
    // console.log(distance);
    if (distance >= target) {
      clearInterval(timer2);

      console.log("升空完毕");
    }

    love.style.top = love_top - distance + "px";
  }, 22);
}

window.onload = function () {
  setTimeout(() => {
    timer = setInterval(() => {
      Next();
    }, 300);
  }, 12000); //gif图播放完毕所需时间为11.73s
};
